<template>
  <div>
    <Category :style="{ marginBottom: '40px' }" :disabled="isShow !== 1" />
    <SpuList v-if="isShow === 1" @cutSpuComponent="cutSpuComponent" />
    <SpuInfo
      v-else-if="isShow === 2"
      @cutSpuComponent="cutSpuComponent"
      :spuInfo="spuInfo"
    />
    <SkuInfo v-else />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import SkuInfo from "./components/SkuInfo.vue";
import SpuInfo from "./components/SpuInfo.vue";
import SpuList from "./components/SpuList.vue";
import type { PagingItemType } from "@/api/spu";
import { ref } from "vue";
import useCategroyStore from "@/stores/category";
import { storeToRefs } from "pinia";

// categroyStore 对象
const categroyStore = useCategroyStore();
// 从store中获取数据
const { category3Id } = storeToRefs(categroyStore);

// spuInfo数据收集
const spuInfo = ref<PagingItemType>({
  category3Id: category3Id.value as number,
  description: "",
  spuName: "",
  tmId: null,
  spuSaleAttrList: [],
  spuImageList: [],
});

// 控制三个页面单独展示   1:展示spuList  2：SPUInfo  3:SpuList
const isShow = ref(1);

// 根据不同的值切换组件事件
const cutSpuComponent = (showIndex: number, row?: PagingItemType) => {
  isShow.value = showIndex;

  if (row) spuInfo.value = row;
};
</script>

<style scoped lang="scss"></style>
